<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Area Search</title>
<style type="text/css">
	.pull_div{
		margin-left: 4.5%;
	}
	.pull_table{
		border-bottom:solid 1px #999 ;
		border-left:solid 1px #999 ;
		border-right:solid 1px #999;
	}
</style>
</head>
<body>
	<div  style="margin-top:2%" >
		<form id="form" action="search" method="post">
			<span style="padding:5px 10px;background:lightgray;">地名搜索</span>
			<input id="areas" type="text" style="padding:5px; width:150px"/>
			<input id="searchBtn" type="button" value="Search" style="padding:5px 10px;"/>
			<br/>
		</form>
		<div id="show_div" class="pull_div">
			<table id="show_table" class="pull_table">
				
			</table>
		</div>		
	</div>
	<script type="text/javascript">
		window.onload=function (){
			var btn=document.getElementById("searchBtn");
			var inputBox=document.getElementById("areas");
			var table=document.getElementById("show_table");
			
			var shapeTd=function(span){
				span.setAttribute("style","padding:4px 10px;background:white;width: 138px;")
			};
			
			var addAction=function(td){
				td.onmouseover=function(){
					td.style.background="gray";
				}
				td.onmouseleave=function(){
					td.style.background="white";
				}
				td.onclick=function(){
					inputBox.value=td.innerHTML;
					removeNode();
				}
			};
			var removeNode=function removeAllChild()
			{
    			while(table.hasChildNodes()) //当div下还存在子节点时 循环继续
    			{
        			table.removeChild(table.firstChild);
    			}
			}
			inputBox.onkeyup=function(){
				var textInner = inputBox.value;
				var xhr = new XMLHttpRequest();
				var path="http://localhost:8080/QuickMatch/searches"+"?content="+encodeURI(textInner);
				xhr.open("GET",path);
				xhr.onreadystatechange=function(){
				if(xhr.readyState == 4 && xhr.status == 200)
				{	removeNode();
					var response=xhr.responseText;
					var areas=JSON.parse(xhr.responseText);
					areas.forEach(function(item,index,array){
						var tr=document.createElement("tr");
						var td=document.createElement("td");
						shapeTd(td);
						td.innerHTML=item.area;
						addAction(td);
						table.appendChild(tr);
						tr.appendChild(td);
					});
					div.appendChild(table);
				}
				};
				xhr.send(null);
		};
	};
	</script>
</body>
</html>